<template>
	<view class="index">
		<view class="search" v-if="show">
				<template v-if="list.length > 0">
					<scroll-view  class="list" scroll-y  :lower-threshold="10" @scrolltolower="scrolltolower">
						<template v-for="(item,index) in list">
							<view
								class="item"
								:style="[setItemStyle]"
								hover-class="item-hover"
								hover-start-time="0"
								hover-stay-time="100"
								@click="selectClick(item)"
							>
								{{ item[labelName] }}
							</view>
						</template>
						
					</scroll-view>
					<view style="border: 1px solid #eee;text-align: center;background-color: #fff;box-shadow: 0 0 10rpx #888;" @click="close">取消</view>
				</template>
				
				<view class="empty" v-else>{{ noData }}</view>
			
		</view>
	</view>
</template>

<script>
export default {
	name: 'qj-fuzzy-search',
	props: {
		/** 展示整体组件 */
		show: {
			type: Boolean,
			default: false
		},
		/** 需要展示的列表 */
		list: {
			type: Array,
			default: () => []
		},
		/** 自定义label */
		labelName: {
			type: String,
			default: 'label'
		},
		/** 自定义value */
		valueName: {
			type: String,
			default: 'value'
		},
		/** 无内容时显示的内容  */
		noData: {
			type: String,
			default: '暂无匹配内容...'
		},
		/** item的对齐样式 */
		align: {
			type: String,
			default: 'left',
			validator: value => {
				return ['left', 'center', 'right'].includes(value);
			}
		},
		/** 自定义item展示样式 */
		customStyle: {
			type: Object,
			default: () => ({})
		}
	},
	computed: {
		/** 设置item的样式 */
		setItemStyle() {
			const { align, customStyle } = this;
			return {
				textAlign: align,
				...customStyle
			};
		}
	},
	methods: {
		close() {
			this.$emit('close');
		},
		/** item点击事件 */
		selectClick(item) {
			console.log(item)
			this.$emit('select', { ...item });
		},
		/** 触底加载下一页 */
		scrolltolower() {
			this.$emit('scrolltolower');
		}
	}
};
</script>

<style lang="scss" scoped>
.index {
	    width: calc(100% - 100px);
	    position: absolute;
	    z-index: 9;
	    left: 100px;
	    top: 54px;
}

.search {
	.list,
	.empty {
		padding: 10rpx;
		background-color: #fff;
		border: 1px solid #eee;
		box-shadow: 0 0 10rpx #888;
		border-radius: 10rpx 10rpx 0 0;
	}

	.list {
		box-sizing: border-box;
		max-height: 300rpx;
		overflow: hidden;

		.item {
			padding: 8rpx 0;
			font-size: 26rpx;
			margin: 5rpx 0;

			&-hover {
				background-color: #f5f5f5;
			}
		}
	}
	.empty {
		height: 80rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
